<template>
   <div>
     <div id="newChart" style="width:1200px;height:240px;margin:0 auto"></div>
   </div>
</template>
<script>
import * as echarts from 'echarts';
export default ({
    props:{
        myChartLineData:{
            type:Array,
            default:()=>{
                return []
            }
        },
    },
    data() {
        return{
            myChartLine:null,
            selectedLegend:{},
            chartLegend: [],
            chartDom: null, 
        }
    },
    watch:{
       'myChartLineData': {
            handler(newVal, oldVal) {
                if (newVal && newVal.length > 0 &&newVal !== oldVal) {
                    this.onGetLineData();
                }

                if(!newVal || newVal.length == 0){
                    if (this.myChartLine) {
                        this.myChartLine.clear()
                    }
                }
            },
            immediate: true,
        },
    },
    mounted() {
        this.chartDom = document.getElementById('newChart'); 
    },
    deactivated(){
        if (this.myChartLine) {
            this.myChartLine.clear()
        }
    },
    activated(){
        if(this.myChartLine){
            this.myChartLine.resize()
        }
    },
    beforeDestroy(){
        this.cleanupChart();
    },
    methods:{
        cleanupChart() {
            if (this.myChartLine) {
                this.myChartLine.off('legendselectchanged');
                this.myChartLine.clear()
                this.myChartLine.dispose();
                this.myChartLine = null;
            }
        },
        onGetLineData(){
            this.$nextTick(()=>{
                if (this.myChartLine) {
                    this.myChartLine.clear()
                }
                this.drawChart(this.myChartLineData)
            })
        },
        drawChart(chartData) {
            if (!this.chartDom) return;
           this.myChartLine = echarts.init(this.chartDom, null, { locale: "ZH" });
            let LineKeys = []
            let values = []
            let nameList = []
            let _series = []
            let maxAndminVal = []
            let useMax,useMin
            chartData.forEach((item,index)=>{
                nameList.push(item.name)
                item.data.forEach(s=>{ 
                    if(index == 0){
                        //  时间
                        const t = s.time.split(' ')
                        LineKeys.push(t[0])
                    }
                    values.push(s.vaule)
                })
                maxAndminVal.push({
                    max:item.maxn,
                    min:item.minn
                })
                //值 
                _series.push({
                    name:item.name,
                    type: 'line',
                    smooth: false,
                    symbol: 'none',
                    data:values,
                })
                values = []
            })
            this.chartLegend = nameList
            nameList.forEach((item,index)=>{
            if(index == 0){
                this.selectedLegend[item]=true
            }else{
                this.selectedLegend[item]=false
            }
            })
        
            let option = {
                title: {
                    left:'1%',
                    textStyle:{
                    fontSize:'14'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                legend: {
                    data: nameList,
                    top:'30',
                    selected:this.selectedLegend
                },
                grid: {
                    top:'60',
                    left: '2%',
                    right: '5%',
                    bottom: '5%',
                    containLabel: true, 
                    borderWidth:1,
                    show: true,
                    borderColor: '#000',
                },
                toolbox: {
                    feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    data: LineKeys,
                    boundaryGap: false,
                    show: true, // X轴 网格线 颜色类型的修改
                    axisLine: {
                    show: true, // Y轴线
                    },
                    splitLine: {
                    show: true, // X轴线 颜色类型的修改
                    lineStyle: {
                        type: 'dashed',
                        color: '#a8a8a8',
                    },
                    },
                    axisLabel: {
                    }
                },
                yAxis: {
                    type: 'value',
                    max: maxAndminVal[0].max,
                    min:  maxAndminVal[0].min,
                    axisLine: {
                    show: true, // Y轴线
                    },
                    splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed',
                        color: '#a8a8a8',
                    },
                    },
                },
                dataZoom: [
                    {
                    type: 'inside',
                    },
                ],
                series:_series
            }
            if (option && typeof option === 'object') {
                this.myChartLine.setOption(option, true);
            }
            this.myChartLine.on('legendselectchanged', (params)=> {
            //当前echarts图例选项
            // var select_key = Object.keys(params.selected);
                //当前图例的选项是否选中 选中为true 未选中为false
            var select_value = Object.values(params.selected);

            const _listValue = []
            select_value.forEach((item,index)=>{
                if(item){
                _listValue.push(maxAndminVal[index].max,maxAndminVal[index].min)
                }
            })  
            const maxVal = Math.max(..._listValue)
            const minVal = Math.min(..._listValue)
            useMax = (maxVal + (maxVal-minVal)*0.1).toFixed(2)
            useMin = (minVal - (maxVal-minVal)*0.1).toFixed(2)
            const sexOption = {
                yAxis: {
                max: useMax,
                min: useMin
            },
            }
            this.myChartLine.setOption(sexOption);
            });
      },
    }
})
</script>
